$base_color : #8f61de; //页面主题基准色
$dark_gray : #dedede; //深灰色
$light_gray : #f0f0f0; //浅灰色

$fonts : ('Microsoft Yahei', Helvetica, Arial);
$perfixs : ("-webkit-", "-moz-", "-o-", ""); // 浏览器内核前缀标识

$container_width : 1080px; // 主容器的宽度

%a_gradual {
  //超链接指向时文字颜色渐变动画
  a {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    &:hover {
      color :$base_color;
    }
  }
}
%box_gradual {
  //指向时背景色变浅动画
  -webkit-transition: background .5s ease,box-shadow .3s ease;
  transition: background .5s ease,box-shadow .3s ease;
  &:hover {
    background: lighten($base_color, 10%);
    box-shadow: 1px 1px 5px 0px rgba(51, 51, 51, 0.8);
  }
}

%comment {
  //评论列表项目样式
  font-size: 14px;
  line-height: 24px;
  margin: 10px 0;
  padding: 10px 20px;
  background: $light_gray;
  box-shadow: 0 0 5px #aaa;
}
//抹角矩形
@mixin border_radius($radius: 5px) {
  @each $perfix in $perfixs {
    #{$perfix}border-radius : $radius;
  }
}
//从上到下的渐变色
@mixin gradual_change($top_color, $bottom_color) {
  background-image: -webkit-linear-gradient(top, $top_color 0, $bottom_color 100%);
  background-image: -o-linear-gradient(top, $top_color 0, $bottom_color 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from($top_color), to($bottom_color));
  background-image: linear-gradient(to bottom, $top_color 0, $bottom_color 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$to', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
